<template>
  <el-dialog title="部门迁移" width="600px" :visible.sync="visible" append-to-body>
    <div class="org-move-dept-madal-box">
      <div class="org-move-dept-modal-head">
        <span class="org-move-dept-modal-title">
          请选择目标部门，本部门（包含部门员工）将移动到该部门下！
        </span>
      </div>
      <div class="org-move-dept-modal-cont">
        <el-tree
          node-key="id"
          accordion
          highlight-current
          :data="list"
          :expand-on-click-node="false"
          :default-expanded-keys="expandedKeys"
          :props="{
            label: 'deptName',
            children: 'organizationTreeVo',
          }"
          @current-change="onCurrentChange"
        ></el-tree>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex';

  // 捡出tree中不包含指定id及id下子级的其它所有节点
  const pickTree = (tree, id) => {
    let list = [];
    if (Array.isArray(tree) && tree.length > 0) {
      const loop = (con, item) => {
        const _item = {};
        const children = 'organizationTreeVo';
        if (item.id !== id) {
          const entries = Object.entries(item);
          entries.forEach(([key, value]) => {
            _item[key] = key === children && Array.isArray(value) ? value.reduce(loop, []) : value;
          });
          con.push(_item);
        }
        return con;
      };
      list = tree.reduce(loop, []);
    }

    return list;
  };

  export default {
    data() {
      return {
        visible: false,
        currId: 0,
        selectId: 0,
        list: [],
        expandedKeys: [],
      };
    },
    computed: {
      ...mapGetters('organization', ['orgTree']),
      ...mapGetters('user', ['userInfo']),
      organizationId() {
        return this.userInfo.organId;
      },
    },
    methods: {
      onOpen(data) {
        const { id } = data;
        this.list = pickTree(this.orgTree, id);
        this.currId = id;
        this.expandedKeys = this.list.length > 0 ? [this.list[0].id] : [];
        this.visible = true;
      },
      close() {
        this.visible = false;
        this.currId = 0;
        this.selectId = 0;
        this.expandedKeys = [];
        this.list = [];
      },
      save() {
        this.$store.dispatch('organization/moveTreeNode', {
          id: this.currId,
          parentId: this.selectId,
          organizationId: this.organizationId,
        });
        this.close();
      },
      onCurrentChange(data) {
        const { id } = data;
        this.selectId = id;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .org-move-dept-madal-box {
    height: 438px;
  }
  .org-move-dept-modal-head {
    height: 38px;
  }
  .org-move-dept-modal-cont {
    height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .org-move-dept-modal-title {
    color: #b4b8be;
  }
</style>
